<template>
  <!-- Two-way Data-Binding -->
  <quill-editor class="ql-container" ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange" />
</template>

<script>
// You can also register Quill modules in the component
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      // content: '<h2>I am Example</h2>',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除文本格式
            ['image', 'link'] // 链接、图片、视频
          ]
        },
        placeholder: ''
      },
      timerId: null
    }
  },
  methods: {
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange(quill) {
      // 添加防抖
      clearTimeout(this.timerId)
      this.timerId = setTimeout(() => {
        // console.log(quill);
        this.$emit('input', quill.html)
      }, 1000)
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {}
}
</script>

<style scoped>
.ql-container {
  height: 200px;
  margin-bottom: 50px;
}
</style>